<!-- 吹哨满意度统计 -->
<template>
  <div style="height: 40%">
    <JxcsTitle title="部门办哨案件统计" />
    <div class="chunk_con" id="Violations" ref="Violations" style="height: 70%"></div>
  </div>
</template>
  
  <script>
import JxcsTitle from '@/components/JxcsTitle'

export default {
  components: {
    JxcsTitle
  },
  props: {
    departmentCase: {
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
    departmentCase(val) {
      this.getList(val)
    }
  },

  data() {
    return {
      // optionData: [],
      data0: [],
      data1: [],
      name: [],
      timer: null
    }
  },

  beforeDestroy() {
    this.desHander()
  },
  methods: {
    getList(val) {
      this.data0 = []
      this.data1 = []
      val.forEach((item) => {
        this.data0.push(item.num)
        this.data1.push(item.completionRate)
        this.name.push(item.type)
      })
      this.renderChart(val)
    },
    renderChart(val) {
      if (this.timer) {
        console.log('清除定时器')
        clearInterval(this.timer)
        this.timer = null
      }
      const myChart = echarts.init(this.$refs.Violations)
      myChart.clear()

      let option = {
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#fff' //设置文字颜色
          }
        },
        lineStyle: {
          color: '#0D97EB' // 设置线的颜色
        },
        legend: {
          data: ['已办哨', '完成率'],
          textStyle: {
            color: '#fff' //设置文字颜色
          }
        },
        xAxis: {
          type: 'category',
          data: this.name,
          axisLabel: {
            rotate: 50,
            interval: 0,
            textStyle: {
              color: '#fff',
              fontSize: 12
            }
          },
          splitLine: {
            show: false
          },
          splitArea: {
            show: false
          }
        },
        dataZoom: {
          show: false,
          startValue: 0,
          endValue: 8
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(13, 151, 235, 0.4)' //设置颜色
            },
            type: 'border',
            width: 1
          },
          splitArea: {
            show: false
          }
        },
        series: [
          {
            name: '已办哨',
            type: 'bar',
            stack: '总量',
            data: this.data0,
            itemStyle: {
              color: '#00DFFE' // 设置为蓝色
            }
          },
          {
            name: '完成率',
            type: 'line',
            stack: '总量',
            data: this.data1,
            itemStyle: {
              color: '#D7DA00'
            },
            lineStyle: {
              color: '#D7DA00'
            }
          }
        ]
      }
      myChart.setOption(option)
      var startNumber = 0
      // 有多少条数据
      var xAxisDatalen = this.name.length
      if (xAxisDatalen > 9) {
        // len的值,可以根据你的数量量设置,不要超过xAxisDatalen的值,不然不会动
        var len = 8 // 街乡数量12，显示一屏
        // timer && clearInterval(timer)
        this.timer = setInterval(function () {
          if (startNumber === xAxisDatalen - len) {
            startNumber = 0
          }
          myChart.dispatchAction({
            type: 'dataZoom',
            startValue: startNumber,
            endValue: startNumber + len
          })
          startNumber++
        }, 2000)
      }
    },

    desHander() {
      let myChart = echarts.init(this.$refs.Violations)
      myChart.dispose()
    }
  }
}
</script>
  
  <style lang="less" scoped>
.chunk_con {
  height: calc(100% - 80px);
}
</style>
  